<template>
  <!-- 绑定学员 -->
  <div class="bind-stus">
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="campus"
        :value="campus"
        label="校区*"
        placeholder="点击选择校区"
        @click="showPicker1 = true"
        :rules="[{required:true,message:'请选择校区'}]"
        size="large"
      />
      <van-field
        v-model="stuname"
        name="stuname"
        label="学员姓名*"
        placeholder="请输入学员姓名"
        :rules="[{ required: true, message: '请填写学员姓名' }]"
        size="large"
      />
      <van-field
        v-model="idCard"
        name="idCard"
        label="身份证号*"
        placeholder="请输入学员身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
        size="large"
      />
      <van-field
        v-model="name"
        name="name"
        label="您的姓名*"
        placeholder="请输入您的姓名"
        :rules="[{ required: true, message: '请填写您的姓名' }]"
        size="large"
      />
      <van-field
        readonly
        clickable
        name="relation"
        :value="relation"
        label="关系*"
        placeholder="请选择您与学员的关系"
        @click="showPicker2 = true"
        :rules="[{required:true,message:'请选择关系'}]"
        size="large"
      />
      <div style="margin: 16px;">
        <van-button
          block
          type="info"
          native-type="submit"
          color="#6CC9D2"
          style="margin-top:83px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0);"
          :loading="submitLoad"
        >提交认证</van-button>
      </div>
    </van-form>
    <!-- 弹窗选择--校区&&关系 -->
    <van-popup v-model="showPicker1" position="bottom">
      <van-picker
        show-toolbar
        value-key="loadValues"
        :columns="campusList"
        @confirm="campusConfirm"
        @cancel="showPicker1 = false"
      />
    </van-popup>
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
        show-toolbar
        :columns="relationList"
        @confirm="relationConfirm"
        @cancel="showPicker2 = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { LoadContent, BindStudent } from "@/api/personal";
import { mapGetters } from "vuex";
import { Toast } from "vant";

export default {
  data() {
    return {
      campus: "",
      loadID: "", // 校区id
      campusList: [], //校区列表
      showPicker1: false,
      idCard: null, //身份证
      relation: "", //关系
      relationList: [
        "本人",
        "父亲",
        "母亲",
        "祖父",
        "祖母",
        "外祖父",
        "外祖母",
        "其他"
      ],
      showPicker2: false,
      stuname: "", //学员姓名
      name: "", //家长姓名
      submitLoad: false //按钮加载图标
    };
  },
  methods: {
    campusConfirm(value) {
      console.log(value);
      this.campus = value.loadValues;
      this.loadID = value.loadID;
      this.showPicker1 = false;
    },
    relationConfirm(value) {
      this.relation = value;
      this.showPicker2 = false;
    },
    //绑定提交
    async onSubmit(values) {
      this.submitLoad = true;
      const result = await BindStudent({
        parentAccount: this.phone,
        campusID: this.loadID,
        studentName: values.stuname,
        identityCardID: values.idCard,
        parentName: values.name,
        relationship: values.relation
      });
      if (result.result == "OK") {
        Toast.success("绑定成功！");
        setTimeout(() => {
          // 跳转至学员详情页面;
          this.$router.replace({
            name: "StuDetails",
            params: {
              studentID: result.data.studentID,
              campusID: this.loadID,
              from: "BindStuds"
            }
          });
          this.submitLoad = false;
        }, 3000);
      }else{
        Toast.fail(result.msg)
      }
      this.submitLoad = false;
    }
  },
  async mounted() {
    // 获取校区
    const result = await LoadContent({
      loadType: "loadCampus"
    });
    if (result.result == "OK") {
      this.campusList = result.data;
    }
  },
  computed: {
    ...mapGetters({ phone: "getPhone" })
  }
};
</script>

<style scoped>
.bind-stus {
  background-color: #fff;
}
</style>